<template>
  <div class="main">
    <van-nav-bar
      title=""
      left-text="确认订单"
      right-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 收货地址 -->
    <div :style="{ display: tabledata ==undefined  ? 'none' : 'block' }">
    <div class="dizhi"  >
      <div class="left">
        <van-icon name="location" />
      </div>
      <div class="right">
        <p>admin <span>154643513546</span></p>
        <van-cell is-link @click="showPopup">{{ dizhi }}</van-cell>
        <van-popup v-model="showdizi" position="bottom" :style="{ height: '40%' }">
          <van-area title="" :area-list="areaList" />
        </van-popup>
      </div>
    </div>
    </div>
    <!-- 商品信息 -->
    <div class="goods" v-for="item in tabledata" :key="item.id">
      <div class="shang">
      </div>
      <div class="xia">
        <img class="image" :src="item.goodsImg" alt="" />
        <div class="wenzi">
          <p>
            {{ item.goodsName }}<span>￥{{ item.goodsPrice }}</span>
          </p>
          <p>
            数量：<span>X{{ item.goodsNum }}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="footer" :style="{ display: tabledata ==undefined  ? 'none' : 'block' }">
      <van-submit-bar
        :price="+zonprice"
        class="footer"
        button-text="付款"
        @submit="onSubmit"
      />
    </div>
    <!-- 点击付款后弹框 -->
    <van-dialog
      v-model="show"
      title="请输入支付密码"
      show-cancel-button
      :showConfirmButton="false"
      :showCancelButton = false
    >
    <!-- 密码输入框 -->
      <van-password-input
        :value="value"
        info="密码为 6 位数字"
        :error-info="errorInfo"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
      <van-number-keyboard
        v-model="value"
        :show="showKeyboard"
        @blur="showKeyboard = false"
      />
    </van-dialog>
  </div>
</template>
<script>
import Vue from "vue";
import { Dialog } from "vant";
// 全局注册
Vue.use(Dialog);
const areaList = {
  province_list: {
    110000: "北京市",
    120000: "天津市",
  },
  city_list: {
    110100: "北京市",
    120100: "天津市",
  },
  county_list: {
    110101: "东城区",
    110102: "西城区",
    // ....
  },
};
export default {
  name: "",
  data() {
    return {
      // 输入密码的参数
        value: '',
        errorInfo: '',
        showKeyboard: true,
      // 弹框按钮的参数
      showdizi: false,
      // 
      
      dizhi: "湖北省武汉市洪山区",
      show: false,
      prices: 0,
      areaList,
      zonprice: 0,
      tabledata: [
        // {
        //   id:1,
        //   dianmian:"淘宝旗舰店",
        //   src:"https://img01.yzcdn.cn/vant/apple-1.jpg",
        //   name:"双宝玄图",
        //   price:405,
        //   num:1
        // },
      ],
    };
  },
  created() {
    this.zonprice = this.$route.query.price;
    this.tabledata = this.$route.query.data;
    console.log(this.tabledata);
  },
  methods: {
    // 数据渲染
    async Getdata() {
      let obj = {
        id,
      };
      // let res = await diandan(obj);
    },
    // 地址获取
    showPopup() {
      this.show = true;
    },
    // 返回跳转
    onClickLeft() {
      this.$router.push({ path: "/gouwuche" });
    },
    // 总价额的弹框
    onSubmit() {
      this.show = true;
    },
  },
  watch: {
    value(value) {
      if (value.length === 6 && value !== '123456') {
        this.errorInfo = '密码错误';
        this.value = "";
      } else if(value == 123456){
        this.show = false;
        this.errorInfo = '支付成功！';
        this.value = "";
        let data = this.tabledata
        this.$router.push({path:"/zhuangtai",query:{data}})
      }
    },
  },
};
</script>
<style scoped lang='less'>
.main {
  background-color: rgb(231, 228, 228);
  .dizhi {
    height: 100px;
    padding: 10px;
    margin-top: 10px;
    box-sizing: border-box;
    background-color: white;
    display: flex;
    .left {
      width: 50px;
      height: 100px;
      font-size: 30px;
      color: rgb(243, 113, 7);
      line-height: 100px;
    }
    .right {
      p {
        font-size: 14px;
        font-weight: bold;
        span {
          font-weight: normal;
        }
      }
      .van-cell--clickable {
        padding: 0;
        margin: 0;
      }
    }
  }
  .goods {
    height: 150px;
    background-color: white;
    padding: 10px;
    box-sizing: border-box;
    margin: 10px 0;
    .shang {
      margin: 5px 0;
      p {
        font-size: 14px;
      }
    }
    .xia {
      display: flex;
      .image {
        width: 70px;
        height: 70px;
        border: 1px solid rgb(220, 220, 221);
      }
      .wenzi {
        p {
          padding: 0;
          font-size: 14px;
          margin-left: 100px;
        }
      }
    }
  }
  .van-dialog {
    width: 338px;
    height: 557px;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 11px;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    .van-password-input {
      margin-top: 50px;
    }
    .zongjia {
      span {
        color: #c40;
      }
    }
  }
  .footer {
    background-color: white;
    height: 50px;
  }
}
</style>